<template>
    <div class="card" :style="[cardStyle]">
        <el-image :fit="imageFit" :style="[imageStyle]" :src="imageUrl"></el-image>
        <div class="font" :style="[fontStyle]">{{ title }}</div>
        <el-switch v-model="switchValue" :active-color="activeColor" :inactive-color="inactiveColor" @change="activitySwitchHandle($event, otherData)"></el-switch>
    </div>
</template>

<script>
export default {
    name: "card_switch",
    props: {
        cardStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        imageFit: {
            type: String,
            default: ""
        },
        fontStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        imageStyle: {
            type: Object,
            default() {
                return {"width":"50px",height: "50px"};
            }
        },
        imageUrl: {
            type: String,
            default: ""
        },
        switchValue: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: "暂无"
        },
        activeColor: {
            type: String,
            default: ""
        },
        inactiveColor: {
            type: String,
            default: ''
        },
        otherData: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        activitySwitchHandle(e, data) {
            this.$emit("activitySwitchHandle", e, data)
        }
    }
}
</script>

<style scoped>

.card {
    display: flex;
    align-items: center;
    padding: 10px;
    max-width: 200px;
    background-color: rgba(0,0,0,0.03);
}

.font {
    font-size: 14px;
    margin: 0 10px;
}

</style>
